<template>
    <el-dialog :model-value="show" title="添加角色" @close="cancel">
      <el-form :model="form" ref="ruleFormRef" :rules="rules">
        <el-form-item label="角色名称" prop="name">
          <el-input
            v-model="form.name"
            autocomplete="off"
            placeholder="请输入角色名称"
          />
        </el-form-item>
        <el-form-item label="描述">
          <el-input
            v-model="form.description"
            autocomplete="off"
            :rows="4"
            type="textarea"
            placeholder="请输入描述"
          />
        </el-form-item>
        <el-form-item label="是否启用">
          <el-radio-group v-model="form.status" class="ml-4">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="submitForm(ruleFormRef)">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>
  </template>
  <script setup lang="ts">
  import { reactive, ref, watch } from "vue";
  import { ElMessage, ElMessageBox, FormInstance } from "element-plus";
  import { addUserRoleAPI,editUserRoleAPI } from "./api";
  //获取表单DOM元素
  const ruleFormRef = ref<FormInstance>();
  
  //获取父组件传递过来的数据
  const props = defineProps({
    show: {
      type: Boolean,
      default: false,
    },
    id: {
      type: Number,
      default: 0,
    },
    data:{
      type:Object,
      default:{}
    }
  });
  
  //监听id有没有发生变化，有就是编辑
  watch(
    () => props.id,
    () => {
      if (props.data.id !== 0) {
        //把数据赋值from表单
        Object.assign(form, props.data);
      }
    }
  );
  
  //获取父组件传递过来的方法
  const emit = defineEmits(["hide"]);
  //取消
  const cancel = () => {
    //清空表单数据
    // ruleFormRef.value?.resetFields();
    form.description = "";
    form.name=""
    form.status=0
    form.id = 0
    //关闭对话框
    emit("hide");
  };
  //表单数据
  const form = reactive<IRoleModel>({
    name: "",
    description: "",
    status: 0,
    id: 0,
  });
  
  const rules = reactive({
    name: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
  });
  
  //添加用户
  const addUser = () => {
    ElMessageBox.confirm("此操作将添加当前用户角色, 是否继续?", "添加角色", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
    })
      .then(() => {
        addUserRoleAPI(form).then((res) => {
          if (res.code === 200) {
            //提示添加成功
            ElMessage.success("添加成功");
            //隐藏用户表单
            //刷新数据
            emit("hide", true);
            //清除表单数据
            ruleFormRef.value?.resetFields();
            form.description = "";
          }
        });
      })
      .catch(() => {
        ElMessage({
          type: "info",
          message: "取消成功",
        });
      });
  };
  //编辑用户
  const editUser = () => {
    ElMessageBox.confirm("此操作将编辑当前用户角色, 是否继续?", "编辑用户信息", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        editUserRoleAPI(props.id,form).then((res) => {
            if (res.code === 200) {
              //提示添加成功
              ElMessage.success("编辑成功");
              //隐藏用户表单
              //刷新数据
              emit("hide", true);
              //清除表单数据
              ruleFormRef.value?.resetFields();
              form.description = "";
            }
          });
      })
      .catch(() => {
        ElMessage({
          type: "info",
          message: "取消成功",
        });
      });
  };
  //确认
  const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.validate((valid) => {
      if (valid) {
        if (props.id === 0) {
          //添加用户角色
          addUser();
        } else {
          //编辑用户角色
          editUser();
        }
      } else {
        ElMessage.error("请输入正确的内容！");
        return false;
      }
    });
  };
  </script>
  <style lang="less" scoped></style>
  